<template>
<div>
  <Header title="设置" :left-arrow="true" leftText="返回" @onLeftTextClick="goBack" ></Header>
  <ul>
    <li v-for="(item, index) in singerList" :key="index">
        {{item}}
    </li>
  </ul>
  <div class="foo">
    <input type="text" v-model="state.singerName" title="歌手姓名"/>
    <van-button @click="addSinger">添加</van-button>
  </div>
</div>
</template>

<script>
import {reactive} from 'vue'
import {useStore} from "vuex";
import Header from "@/components/Header";
import {useRouter} from "vue-router";

export default {
    name: "Settings.vue",
    components:{
      Header
    },
    setup(){
        const router = useRouter()
        const state = reactive({
          singerName: ''
        });
        const singerList = useStore().state.categoryList
        //又让我发现一个坑!!!! useStore只能在setup里面用, 不能在 addSinger不能用!!!!
        // useRouter 应该也是一样的!!!!!
        const store = useStore()
        function addSinger(){
            store.dispatch("addCategory", state.singerName )
        }
        function goBack(){
          router.go(-1)
        }
        //TODO:设置vuex中的歌手数组
        return {state, singerList, addSinger, goBack}
    }
}
</script>

<style scoped>
.foo{
  margin: 0.2rem 0.2rem;
}
</style>